import React, { Component } from 'react'
import { Text, View, StyleSheet, TextInput, } from 'react-native'
import Svg, { Path } from 'react-native-svg';

export default class Home extends Component {

  constructor(props){
    super(props)

    this.state = {
      value:'',
    }
  }

  onChangeText(val){
    this.setState({
      value:val
    })
  }

  render() {

    const { value, } = this.state

    return (
      <View style={styles.container}>
        <View style={styles.sign}>
          <Svg t="1608105860626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5004" width="20" height="20"><Path d="M1024 354c0-1.8-0.2-3.6-0.5-5.4V158c0-51.8-42.2-94-94-94H798V30c0-16.5-13.5-30-30-30s-30 13.5-30 30v34H286V30c0-16.5-13.5-30-30-30s-30 13.5-30 30v34H94.5c-51.8 0-94 42.2-94 94v190.6c-0.3 1.8-0.5 3.6-0.5 5.4 0 1.8 0.2 3.6 0.5 5.4V930c0 51.8 42.2 94 94 94h835c51.8 0 94-42.2 94-94V359.4c0.3-1.8 0.5-3.6 0.5-5.4zM94.5 124H226v38c0 16.5 13.5 30 30 30s30-13.5 30-30v-38h452v38c0 16.5 13.5 30 30 30s30-13.5 30-30v-38h131.5c18.7 0 34 15.3 34 34v166h-903V158c0-18.7 15.3-34 34-34z m835 840h-835c-18.7 0-34-15.3-34-34V384h903v546c0 18.7-15.3 34-34 34z" fill="#d5af00" p-id="5005"></Path><Path d="M697.3 511.6L444.1 764.8 326.7 647.4c-11.7-11.7-30.8-11.7-42.4 0-11.7 11.7-11.7 30.8 0 42.4l138.6 138.6c7.6 7.6 18.3 10.2 28.1 8 0.2 0 0.4-0.1 0.6-0.1 5.1-1.3 9.8-3.9 13.8-7.8L739.7 554c11.7-11.7 11.7-30.8 0-42.4-11.7-11.7-30.8-11.7-42.4 0z" fill="#d5af00" p-id="5006"></Path></Svg>
        </View>
        <View style={styles.inputBox}>
          <Svg t="1608109167103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1983" width="15" height="15"><Path d="M495.430421 66.278317c218.718447 0 397.669903 178.951456 397.669903 397.669903S714.148867 861.618123 495.430421 861.618123 97.760518 682.666667 97.760518 463.94822 276.711974 66.278317 495.430421 66.278317m0-66.278317C238.601942 0 31.482201 207.119741 31.482201 463.94822s207.119741 463.94822 463.94822 463.94822 463.94822-207.119741 463.94822-463.94822S752.2589 0 495.430421 0z" fill="#999999" p-id="1984"></Path><Path d="M772.142395 801.967638L959.378641 990.860841 772.142395 801.967638m0-33.139159c-8.28479 0-16.569579 3.313916-23.197411 9.941748-13.255663 13.255663-13.255663 33.139159 0 46.394822l187.236246 187.236245c6.627832 6.627832 14.912621 9.941748 23.197411 9.941748s16.569579-3.313916 23.197411-9.941748c13.255663-13.255663 13.255663-33.139159 0-46.394822L795.339806 778.770227c-4.970874-6.627832-14.912621-9.941748-23.197411-9.941748z" fill="#999999" p-id="1985"></Path></Svg>
          <TextInput
            style={styles.input}
            value={value}
            onChangeText={val => this.onChangeText(val)}
            placeholder='搜索相关内容'
            placeholderTextColor='#999999'
            clearButtonMode='always'
          />
        </View>
        <View style={styles.sign}>
          <Svg t="1608109359278" class="icon" viewBox="0 0 1185 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2114" width="20" height="20"><Path d="M592.842105 53.894737c297.768421 0 538.947368 203.452632 538.947369 452.715789 0 118.568421-55.242105 229.052632-153.6 312.589474C875.789474 902.736842 739.705263 949.894737 592.842105 949.894737c-56.589474 0-111.831579-6.736842-165.726316-21.557895-5.389474-1.347368-12.126316-2.694737-18.863157-2.694737-24.252632 0-91.621053 13.473684-150.905264 26.947369 4.042105-48.505263-1.347368-99.705263-36.378947-126.652632C145.515789 763.957895 53.894737 660.210526 53.894737 506.610526 53.894737 257.347368 295.073684 53.894737 592.842105 53.894737m0-53.894737C265.431579 0 0 226.357895 0 506.610526c0 146.863158 72.757895 269.473684 188.631579 361.094737 36.378947 29.642105 1.347368 156.294737 1.347368 156.294737s184.589474-44.463158 219.621053-44.463158h4.042105c56.589474 14.821053 117.221053 24.252632 179.2 24.252632 327.410526 0 592.842105-216.926316 592.842106-497.178948C1185.684211 226.357895 920.252632 0 592.842105 0z" fill="#FFFFFF" p-id="2115"></Path><Path d="M326.063158 495.831579m-53.894737 0a53.894737 53.894737 0 1 0 107.789474 0 53.894737 53.894737 0 1 0-107.789474 0Z" fill="#FFFFFF" p-id="2116"></Path><Path d="M592.842105 495.831579m-53.894737 0a53.894737 53.894737 0 1 0 107.789474 0 53.894737 53.894737 0 1 0-107.789474 0Z" fill="#FFFFFF" p-id="2117"></Path><Path d="M859.621053 495.831579m-53.894737 0a53.894737 53.894737 0 1 0 107.789473 0 53.894737 53.894737 0 1 0-107.789473 0Z" fill="#FFFFFF" p-id="2118"></Path></Svg>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    height:40,
    backgroundColor:'#2c2c2c',
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:15,
    paddingRight:15,
  },
  sign:{
    width:20,
  },
  inputBox:{
    flex:1,
    height:28,
    overflow:'hidden',
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    borderRadius:14,
    backgroundColor:'#f8f8f8',
    marginLeft:14,
    marginRight:14,
    paddingLeft:5,
  },
  input:{
    flex:1,
    height:40,
    backgroundColor:'#f8f8f8',
    fontSize:12,
  }
})
